<!-- Section -->
<div class="section @@classes section-lg">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-12 col-lg-5 mb-5 mb-lg-0">
                <h2 class="mb-5 h5">Choose your color</h2>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-dark">Dark Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-gray">Gray Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-success">Success Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-info">Info Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-danger">Danger Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-5">
                <div class="mb-5">
                    <span class="h5">Stripped Progress Bars</span>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-dark">Dark Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-gray">Gray Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-success">Success Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-info">Info Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-danger">Danger Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-between">
            <div class="col-12 col-lg-5">
                <div class="mt-5 mb-4">
                    <span class="h5">Inset Tooltip</span>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <h3 class="h4 progress-tooltip rounded p-2">Dark color</h3>
                        <div class="progress-percentage">
                            <span>40%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <h3 class="h4 progress-tooltip rounded p-2">Gray color</h3>
                        <div class="progress-percentage">
                            <span>40%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-gray" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <h3 class="h4 progress-tooltip rounded p-2">Success Color</h3>
                        <div class="progress-percentage">
                            <span>40%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <h3 class="h4 progress-tooltip rounded p-2">Info color</h3>
                        <div class="progress-percentage">
                            <span>40%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <h3 class="h4 progress-tooltip rounded p-2">Danger color</h3>
                        <div class="progress-percentage">
                            <span>40%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="mt-5 mb-4">
                    <span class="h5">Choose your size</span>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info info-xl">
                        <div class="progress-label">
                            <span class="text-dark">XL Progress Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>40%</span>
                        </div>
                    </div>
                    <div class="progress progress-xl">
                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info info-xl">
                        <div class="progress-label">
                            <span class="text-dark">LG Progress Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress progress-lg">
                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-dark">MD Progress Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-dark">SM Progress Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->